<template>
  <Form ref="formItem" :model="formItem" :label-width="80" :rules="ruleInline">
    <FormItem label="城市名称" prop="name">
      <Input v-model="formItem.name" placeholder="城市名称"></Input>
    </FormItem>
    <FormItem label="代码" prop="id">
      <Input v-model="formItem.id" :maxlength="6" placeholder="城市代码"></Input>
    </FormItem>
    <FormItem label="上级代码" prop="upid">
      <Input v-model="formItem.upid" :maxlength="6" placeholder="上级代码"></Input>
    </FormItem>
    <FormItem label="区域级别">
      <RadioGroup v-model="formItem.level">
        <Radio :label="1">省</Radio>
        <Radio :label="2">市</Radio>
        <Radio :label="3">区县</Radio>
      </RadioGroup>
    </FormItem>
    <FormItem label="经度">
      <Input v-model="formItem.lng" placeholder="经度"></Input>
    </FormItem>
    <FormItem label="纬度">
      <Input v-model="formItem.lat" placeholder="纬度"></Input>
    </FormItem>
    <FormItem>
      <Button type="primary" @click="post">提交</Button>
    </FormItem>
  </Form>
</template>
<script>
  import {district} from "@/api";
  import {Form, FormItem, Input, InputNumber, Button, RadioGroup, Radio} from 'iview';

  export default {
    components: {
      Form, FormItem, Input, InputNumber, Button, RadioGroup, Radio
    },
    data() {
      //自定义表单验证器
      const validateId = function (rule, value, callback) {
        if (!value) {
          return callback(new Error("请输入城市代码"));
        } else if (!/(^[1-9]\d{5}(?!\d)$)/.test(value)) {
          return callback(new Error("请输入城市代码，代码为6位数字"))
        } else {
          callback();
        }
      };
      const validateUpid = function (rule, value, callback) {
        if (!value) {
          if (value === '0' || value === 0) {
            return callback();
          }
          return callback(new Error("请输入上级城市代码"));
        } else if (!/(^[1-9]\d{5}(?!\d)$)|(^[0]$)/.test(value)) {
          return callback(new Error("请输入上级城市代码，代码为6位数字，省份的上级代码为0"))
        } else {
          callback();
        }
      };
      return {
        formItem: {
          id: "",
          name: "",
          lng: '',
          lat: '',
          level: 1,
          upid: ''
        },
        ruleInline: {
          name: [
            {required: true, message: "城市名称必须填写", trigger: "blur"},
          ],
          id: [
            {validator: validateId, trigger: 'blur'}
          ],
          upid: [
            {validator: validateUpid, trigger: 'blur'},
          ],
        }
      };
    },
    methods: {
      post() {
        this.$refs["formItem"].validate(valid => {
          if (valid) {
            if (this.formItem.id) {
              //更新数据
              district.update(this.formItem.id, this.formItem).then(res => {
                this.$router.push("/district/list");
              });
            } else {
              //新增数据
              district.create(this.formItem).then(res => {
                this.$router.push("/district/list");
              });
            }
          } else {
            this.$Message.error("请填写必要信息");
          }
        });
      },
      get(id) {
        district.getInfo(id).then(res => {
          this.formItem = res.data;
        });
      }
    },
    mounted() {
      if (this.$route.query.id) {
        this.get(this.$route.query.id);
      }
    }
  };
</script>
